<template>
  <div class="part-carousel">
    <div class="con">
      <div class="carousel">
        <el-carousel indicator-position="none" arrow="never" :interval="10000">
          <el-carousel-item v-for="item in 1" :key="item">
            <div class="item">
              <el-row v-if="show" :gutter="16">
                <el-col :span="8">
                  <div class="d_card">
                    <div class="title">运动者性别比例</div>
                    <circle-chart :cdata="genderData"></circle-chart>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="d_card">
                    <div class="title">运动者年龄比例</div>
                    <circle-chart1 :cdata="ageData"></circle-chart1>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="d_card">
                    <div class="title">运动人次趋势</div>
                    <line-chart1 :cdata="monthData"></line-chart1>
                  </div>
                </el-col>
                <el-col :span="12" class="mt16">
                  <div class="d_card">
                    <div class="title">体质测试分数（按性别）</div>
                    <line-chart2 :cdata="monthData"></line-chart2>
                  </div>
                </el-col>
                <el-col :span="12" class="mt16">
                  <div class="d_card">
                    <div class="title">体质测试分数（按年龄）</div>
                    <line-chart3 :cdata="monthData"></line-chart3>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import circleChart from "../../components/chart-cricle.vue";
import circleChart1 from "../../components/chart-cricle1.vue";
import lineChart1 from "../../components/chart-line1.vue";
import lineChart2 from "../../components/chart-line2.vue";
import lineChart3 from "../../components/chart-line3.vue";

export default {
  components: {
    circleChart,
    circleChart1,
    lineChart1,
    lineChart2,
    lineChart3
  },
  props: {
    ageData: {
      type: Object,
      default() {
        return null;
      }
    },
    genderData: {
      type: Object,
      default() {
        return null;
      }
    },
    monthData: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      show: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.show = true;
    });
  }
};
</script>

<style>
.el-carousel__container {
  height: 805px;
}
</style>

<style lang="scss" scoped>
.con {
  width: 100%;
  overflow: hidden;
  .carousel {
    margin: 0 -20px;
    .item {
      height: 805px;
      margin: 0 20px;
      .mt16 {
        margin-top: 16px;
      }
      .title {
        font-size: 18px;
        color: #ff8a18;
        padding: 20px;
      }
      .d_card {
        height: 393px;
        padding: 10px;
      }
      .chart-area {
        display: flex;
        align-items: center;
        span {
          width: 50%;
        }
      }
    }
  }
}
</style>
